<template>
  <div class="cart">
    <div class="top">
      <span class="fh"><van-icon name="arrow-left" @click="fh" /></span>
      <span>购物车</span>
    </div>
    <div class="mainCenter">
      <van-empty
        description="购物车空空如也"
        v-if="goods.length == 0 ? true : false"
      >
        <van-button
          round
          type="danger"
          class="bottom-button"
          @click="goSort"
          v-if="goods.length == 0 ? true : false"
          >立即购物</van-button
        >
      </van-empty>
      <van-swipe-cell v-for="item in goods" :key="item.proid" class="box">
        <van-checkbox
          v-model="item.flag"
          @click="dx(item.cartid, item.flag)"
          class="btn"
        >
        </van-checkbox>
        <van-card
          :price="item.originprice"
          :title="item.proname"
          class="goods-card"
          :thumb="item.img1"
          v-if="goods.length == 0 ? false : true"
        />
        <van-stepper
          v-model="item.num"
          theme="round"
          button-size="22"
          disable-input
          class="addReduce"
          @plus="add(item.cartid, item.num)"
          @minus="reduce(item.cartid, item.num)"
        />

        <template #right>
          <van-button
            square
            text="删除"
            type="danger"
            class="delete-button"
            @click="sc(item.cartid, item.proid)"
          />
        </template>
      </van-swipe-cell>

      <!-- 不用动顶部 -->
      <van-divider
        :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
      >
        可能你想要
      </van-divider>
      <van-list
        class="list"
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        offset="0"
      >
        <div
          v-for="item in list"
          :key="item.proid"
          class="sp"
          @click="goDetailVue(item.proid)"
        >
          <img :src="item.img1" />
          <p class="title">{{ item.proname }}</p>
          <p class="price">￥{{ item.originprice }}</p>
        </div>
      </van-list>
    </div>
    <!-- 不用动底部 -->
    <div v-if="goods.length == 0 ? false : true">
      <van-submit-bar
        :price="num()"
        button-text="去结算"
        @submit="onSubmit"
        v-for="item in goods"
        :key="item.proid"
        class="fot"
      >
        <van-checkbox v-model="checkeds" @click="qx">全选</van-checkbox>
        <template #tip>
          你的收货地址不支持同城送,
          <span @click="onClickEditAddress">修改地址</span> -->
        </template>
      </van-submit-bar>
    </div>

    <FooterBar class="fot" v-if="goods.length == 0 ? true : false"></FooterBar>
  </div>
</template>

<script>
import { Toast } from "vant";
import FooterBar from "../components/FooterBar.vue";
export default {
  name: "GoodsCart",
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      pageIndex: 1,
      checked: true,
      price: 0.0,
      goods: [],
      checkeds: true,
      radio: "1",
      value: 1,
      // isShow:true
    };
  },
  components: {
    FooterBar,
  },
  methods: {
    fh() {
      this.$router.go(-1);
    },
    add(cartid, num) {
      let token = localStorage.getItem("token");
      // console.log(this.value);
      num++;
      this.$service({
        method: "post",
        url: "/api/cart/updatenum",
        headers: { token },
        data: {
          cartid,
          num,
        },
      }).then((res) => {
        // console.log(res);
        if (res.data.code == 200) {
          Toast("添加成功");
        }
      });
    },
    reduce(cartid, num) {
      let token = localStorage.getItem("token");
      // console.log(this.value);
      num--;
      this.$service({
        method: "post",
        url: "/api/cart/updatenum",
        headers: { token },
        data: {
          cartid,
          num,
        },
      }).then((res) => {
        // console.log(res);
        if (res.data.code == 200) {
          Toast("减少成功");
        }
      });
    },
    sc(cartid, goodsId) {
      let token = localStorage.getItem("token");
      // console.log(cartid);
      // console.log(goodsId);
      this.$service({
        method: "post",
        url: "/api/cart/remove",
        headers: { token },
        data: {
          cartid,
        },
      }).then((res) => {
        // console.log(res);
        if (res.data.code == 200) {
          Toast("删除成功");
          this.goods.splice(goodsId, 1);
          // console.log(" this.goods: ", this.goods);
        }
      });
    },
    dx(cartid, flag) {
      let token = localStorage.getItem("token");
      // console.log("token: ", token);
      this.$service({
        method: "post",
        url: "/api/cart/selectone",
        headers: { token },
        data: {
          cartid,
          flag,
        },
      }).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          Toast("修改选中状态成功");
          this.checkeds = this.goods.every((item) => {
            return item.flag;
          });
        }
      });
    },
    qx() {
      console.log("this.checkeds: ", this.checkeds);
      let token = localStorage.getItem("token");
      let userid = localStorage.getItem("userid");
      this.$service({
        method: "post",
        url: "/api/cart/selectall",
        headers: { token },
        data: { userid, type: this.checkeds },
      }).then((res) => {
        // console.log(res);
        this.goods.forEach((item) => {
          return (item.flag = this.checkeds);
        });
      });
    },
    num() {
      let goodsNum = this.goods.filter((item) => item.flag);
      return goodsNum.reduce((sum, item) => {
        return (sum += item.originprice * item.num * 100);
      }, 0);
    },
    goSort() {
      this.$router.push({ path: "/Sort" });
    },
    onSubmit() {
      let token = localStorage.getItem("token");
      let userid = localStorage.getItem("userid");
      this.$service({
        method: "post",
        url: "/api/order/addOrder",
        data: {
          userid,
        },
        headers: { token },
      }).then((res) => {
        // console.log(res, "res");
        this.$router.push({ path: "/Submit/" + res.data.time });
      });
    },
    onClickEditAddress() {},
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      this.$service({
        url: "/api/pro/list",
        params: {
          count: this.pageIndex,
          limitNum: 10,
        },
      })
        .then((res) => {
          if (res.data.code == 200) {
            this.list = [...this.list, ...res.data.data];
            // console.log("res.data.date", res.data.data);
            this.loading = false;
            this.pageIndex++;
          }
        })
        .catch((err) => {
          console.log(err, "err");
        });
    },
    goDetailVue(id) {
      // console.log(id);
      this.$router.push("/DetailVue/" + id);
    },
  },
  created() {
    let token = localStorage.getItem("token");
    let userid = localStorage.getItem("userid");
    this.$service({
      method: "post",
      url: "/api/cart/list",
      headers: { token },
      data: { userid },
    }).then((res) => {
      // console.log(res);
      if (res.data.code == 200) {
        this.goods = res.data.data;
        // console.log(" this.goods: ", this.goods);
      }
    });
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}
.cart {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.mainCenter {
  flex: 1;
  overflow: auto;
}
.fot .top {
  height: 3rem;
}
.top {
  text-align: center;
  line-height: 3rem;
  border-bottom: 2px solid gray;
  position: relative;
}
.fh {
  position: absolute;
  font-size: 20px;
  left: 1rem;
}
.bottom-button {
  width: 160px;
  height: 40px;
  margin-bottom: 10px;
}
.list {
  width: 100%;
  column-count: 2;
  font-size: 0.875rem;
  background-color: #ededed;
  column-gap: 0.3125rem;
}
.list .sp {
  width: 100%;
  text-align: center;
  background-color: white;
  border-radius: 0.625rem;
  break-inside: avoid;
  margin-bottom: 0.625rem;
}
.list .sp img {
  border-radius: 0.5rem;
  width: 90%;
  margin-top: 0.625rem;
}
.list .sp .title {
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 0.625rem 0;
}
.list .sp .price {
  text-align: left;
  color: orange;
  font-size: 1.125rem;
}
.dj {
  position: absolute;
  right: 2.5rem;
}
.delete-button {
  height: 100%;
  width: 4rem;
}
.addReduce {
  position: absolute;
  right: 0.8rem;
  top: 3.8rem;
}
.box {
  box-sizing: border-box;
  padding-left: 3rem;
  position: relative;
}
.btn {
  position: absolute;
  left: -2.5rem;
  top: 2rem;
}
</style>